import { Component } from '@tarojs/taro'
import { View, Text, Swiper, SwiperItem, Image } from '@tarojs/components'
import { AtCurtain,AtButton } from 'taro-ui'
// import { AtSearchBar} from 'taro-ui'
import './eyeDoctor.scss'
import ed001 from '../../img/ed001.png'
import ed002 from '../../img/ed002.png'
import ed003 from '../../img/ed003.png'
import touxiang from '../../img/touxiang3.png'
import shouye from '../../img/shouye2.png'
// import photo from '../../img/item_image.png'
import right from '../../img/right.png'
import app from '../../main'
import yq from '../../img/youhuiquan3.png'
import by from '../../img/banyuan.png'


export default class EyeDoctor extends Component {

  config = {
    navigationBarTitleText: '爱眼医生'
  }
  constructor() {
    super(...arguments)
    this.state = {
      value: '',
      disabled: false,
      home: 'display:block',
      mine: 'display:none',
      //优惠券提醒
      isOpened:false,
      coupon:[],
      //科普内容
      kepulist: [],
      kuputotal: 0,
      //轮播图数据
      lunboList: [
      ],
      mydoctor: [],
      count: 0
    }
  }
  onChange(value) {
    this.setState({
      value: value,
    })
  }

  //跳转到搜索
  gotoSearch() {
    app.navigateTo('../homeSearch/homeSearch');
    this.setState({
      disabled: true
    })
  }

  onBlur() {
    this.setState({
      disabled: false
    })
  }

  offset = 0
  length = 3

  //获取我的医生数据
  getmydoctor() {
    let me = this;
    let data = { offset: this.offset, length: this.length }
    let dataArray = []
    app.post('web/myself/myDoctorList', data, function (res) {
      dataArray = me.state.mydoctor.concat(res.data.result.list)
      me.total = res.data.result.total
      me.setState({
        mydoctor: dataArray
      })
    })
  }


  //优惠券提醒
  couponRemind(){
    let me = this;
    let data = {}
    app.get('web/coupon/remind',data,function(res){
      console.log(res)
      if(res.data.result.length != 0){
        me.setState({
          isOpened:true,
          coupon:res.data.result
        })
      }
    })
  }

  //关闭
  onClose () {
    this.setState({
      isOpened: false
    })
  }



  //跳转到我的医生
  gotoMyDoctor() {
    app.navigateTo('../myDoctor/myDoctor')
  }


  //Grid点击跳转
  gotoquicklyFound(index) {
    if (index === 1) {
      app.navigateTo('../quicklyFound/quicklyFound?start=one')
    } else if (index === 2) {
      app.navigateTo('../findDoctor/findDoctor')
    } else {
      app.navigateTo('../findHospital/findHospital')
    }
  }

  //跳转到科普页面
  gotoAiyanPolular() {
    app.navigateTo('../aiyanPolular/aiyanPolular')
  }
  //首页和我的跳转
  btnSelect() {
    app.redirectTo('../myEyedoctor/myEyedoctor')
  }
  //获取科普内容数据
  getData() {
    let me = this;
    let data = { offset: 0, length: 4 };
    let code = { code: 101 }
    //获取轮播图数据
    app.get('web/advertisement/banners', code, function (res) {
      me.setState({
        lunboList: res.data.result
      })
    })
    //获取科普数据
    app.post('video_recommends/homeVideo', data, function (res) {
      me.setState({
        kepulist: res.data.result.data,
        kuputotal: res.data.result.total
      })
    })
  }
  //问诊数
  getUnreadNumber() {
    var me = this;
    app.get('web/myself/unreadNumber', {}, (res) => {
      if (res.data.status == 'success') {
        me.setState({
          count: res.data.result
        })
      }
    })
  }

  componentWillMount() {
    this.getData();
    this.getLocation();
    this.getmydoctor();
    this.couponRemind()
  }
  componentDidShow() {
    this.getUnreadNumber();
  }

  onShareAppMessage(res) {
    return {
      title: '首页',
      path: '/pages/eyeDoctor/eyeDoctor'
    }
  }

  // 获取地理位置
  getLocation() {
    wx.getSetting({
      success(res) {
        console.log(res);
        if (!res.authSetting['scope.userLocation']) {
          wx.authorize({
            scope: 'scope.userLocation',
            success() {
              // 用户已经同意小程序使用录音功能，后续调用 wx.getLocation 接口不会弹窗询问
              wx.getLocation({
                type: 'gcj02',
                success(res) {
                  const latitude = res.latitude
                  const longitude = res.longitude
                  app.post('web/patient/saveLocation', { lat: latitude, lnt: longitude }, function () {
                    // 回调处理
                  });
                }
              })
            }
          })
        }
      }
    })
  }

  //跳转到科普详情
  navTo (url) {
    app.navigateTo(url);
  }

  navigateTo(url) {
    console.log(url)
    // url  =  'https://mp.weixin.qq.com/s/phlb93IBt0PJfKA3_FM7mg';
    // url  = 'https://zhongsheng.bayou-tech.cn/stp/471';
    console.log("轮播图url", url);
    let reg = new RegExp(/^(http|https):/);
    let bool = url.match(reg);
    console.log(bool)
    console.log(typeof bool)
    if (bool != null && bool instanceof Object ) {
        console.log("是h5",url);
        app.navigateTo('/pages/webViewContaziner/webViewContaziner' + `?webUrl=${url}` + '&token=' + app.getToken())
    } else {
      console.log("是科普");
      app.toast('不是合法链接')
      app.navigateTo('/pages/webViewContaziner/webViewContaziner' + `?webUrl=${url}` + '&token=' + app.getToken())
    }
  }

  render() {
    let a = this.state.mydoctor.map((item) => {
      return <View ><Image className='body-title-image headimage' src={item.head_image}></Image></View>
    })
    return (
      <View className='eye-doctor'>
        {/*<View className='top'>     
                <AtSearchBar
                className='top-search' 
                placeholder='请输入医生姓名，医院，症状，眼病'
                disabled={this.state.disabled}
                value={this.state.value}
                onChange={this.onChange.bind(this)}
                onFocus={this.gotoSearch.bind(this)}
                onBlur={this.onBlur}
                />
            </View>*/}
        <View style={this.state.home}>
          <View className='top-body'>
            <View className='top-body-title'>
              <View>
                <Text className='title'>我的医生</Text>
              </View>
              <View className='head-image' onClick={this.gotoMyDoctor.bind(this)}>
                {a}
                <Image className='body-title-image' src={right} />
              </View>
            </View>
          </View>
          <View className='body-grid'>
            <View className='grid-col' onClick={this.gotoquicklyFound.bind(this, 1)}>
              <Image className='grid-image' src={ed001} />
              <Text className='title'>快速咨询</Text>
            </View>
            <View className='grid-col' onClick={this.gotoquicklyFound.bind(this, 2)}>
              <Image className='grid-image' src={ed002} />
              <Text className='title'>找医生</Text>
            </View>
            <View className='grid-col' onClick={this.gotoquicklyFound.bind(this, 3)}>
              <Image className='grid-image' src={ed003} />
              <Text className='title'>找医院</Text>
            </View>
          </View>
          {/* 轮播 item.url*/}
          <View className='body-swiper'>
            <Swiper
              indicatorColor='rgba(0, 0, 0, .3)'
              indicatorActiveColor='#ffffff'
              circular
              indicatorDots
              interval={3000}
              autoplay>
              {this.state.lunboList.map((item) => {
                return <SwiperItem>
                  <View><Image className='swiper-image' onClick={this.navigateTo.bind(this, item.url)} src={app.getPath(item.image)} /></View>
                </SwiperItem>
              })}
            </Swiper>
          </View>
          {/* 科普 */}
          <View className='button'>
            <View className='botton-title'>
              <View>
                <Text className='title'>爱眼科普</Text>
              </View>
              <View onClick={this.gotoAiyanPolular.bind(this)}>
                <Text className='title'>更多></Text>
              </View>
            </View>
            <View className='buttom-imageinfo'>
              {this.state.kepulist.map((item) => {
                return <View className='buttom-imageinfo-box' onClick={this.navTo.bind(this, '../aiyanPolularVideo/aiyanPolularVideo?kepuid=' + item.id)}>
                  <View className='buttom-imageinfo-image'>
                    <View><Image mode='widthFix' className='buttom-image' src={item.image} /></View>
                    <View className='titleH'><View className='title2'>{item.title}</View></View>
                  </View>
                  <View className='buttom-imageinfo-text'>
                    <View className='buttom-imageinfo-text-useravider'>
                      <Image className='text-useravider' src={item.head_image} />
                    </View>
                    <View className='buttom-imageinfo-text--userdir'>
                      <View className='buttom-imageinfo-text-a'><Text>{item.doctor_name}</Text><Text style='margin-left:5px;'>{item.positional_title}</Text></View>
                      <View className='buttom-imageinfo-text-b'><Text>{item.hospital}</Text></View>
                    </View>
                  </View>
                </View>
              })}
            </View>
          </View>
          <View className='empty'></View>
        </View>


        <View style={this.state.mine}>
          <View>我的</View>
        </View>
        {/* 提示框 */}
        <AtCurtain
          isOpened={this.state.isOpened}
          onClose={this.onClose.bind(this)}
          closeBtnPosition ='top-right'
        >
          <View className='coupon'>
            <View className='coupon-title'>有新的优惠券到账</View>
            {
                this.state.coupon.map((item)=>{
                    return <View className="myCoopn">          
                        <View className="card">
                            {/* <Image className='card-by' src={by}/> */}
                            <View className="card-info">
                                {
                                  item.coupon_type == '满减'
                                  ? <View className='card-info1'>￥{item.discount}</View>
                                  : <View className='card-info1'>{parseInt(item.discount)/10}折</View>
                                }
                                
                            
                                <View className='card-info2'>满{item.full_money}可用</View>
                            </View>
                            <Image className='card-yq' src={yq}/>
                        </View>
                        <View className='card-content'>
                            <View>
                                <View className="card-content-title">
                                    <Text>{item.title}</Text> 
                                </View>
                                <View className='card-content-row'>
                                    <View className='card-content-text'>
                                        <Text>适用项目:  {item.scope}</Text>
                                        {
                                          item.use_type == "开始日期结束日期"
                                          ? <Text>有效期至:  {item.end_time.slice(0,10)}</Text>
                                          : <Text>有效期至:  领后{item.days}天内可用</Text>
                                        }
                                        
                                    </View>     
                                </View>
                                <View className='many'>说明:{item.desc}</View>
                            </View>
                        </View>
                    </View> 
              })           
            }
           
            </View>
        </AtCurtain>




        <View className='bottonBtn' >
          <View className="bottonBtntext" >
            <View><Image className="btnImage" src={shouye} /></View>
            <View><Text className='t'>首页</Text></View>
          </View>
          <View className='bottonBtntext' onClick={this.btnSelect}>
            <View><Image className="btnImage" src={touxiang} /></View>
            <View>我的</View>
          </View>
          <View className='myMessage'>
            <Text>{this.state.count > 99 ? '99+' : (this.state.count == 0 ? '' : this.state.count)}</Text>
          </View>
        </View>
      </View>
    )
  }
}